<template>
    <div>
        <banner :bannerImage="bannerImage" :galleryImages="galleryImages" :sightName="sightName"></banner>
        <title-header :sightName="sightName"></title-header>
        <div class="content-box">
            <detail-list :listData="categoryList"></detail-list>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import Banner from './components/Banner.vue';
import TitleHeader from './components/Header.vue';
import DetailList from './components/List.vue';

export default {
    name: 'Detail',
    components: {
        Banner,
        TitleHeader,
        DetailList
    },
    data(){
        return{
            detailListData: [
                {
                    title: '促销'
                },
                {
                    title: '门票'
                },
                {
                    title: '金桥索道',
                    children:[
                        {
                            title: '你好呀'
                        },
                        {
                            title: '你是谁'
                        }
                    ]
                }
            ],
            bannerImage: '',
            galleryImages: [],
            sightName: '',
            categoryList: []
        }
    },
    methods:{
        getDetailInfo(){
            axios.get('/api/detail.json?id=' + this.$route.params.id).then(this.getDetailInfoSuccess)
        },
        getDetailInfoSuccess(data){
            let datas = data.data.data;
            console.log(data)

            this.bannerImage = datas.bannerImage;
            this.galleryImages = datas.galleryImages;
            this.sightName = datas.sightName;
            this.categoryList = datas.categoryList;
        }
    },
    mounted(){
        this.getDetailInfo()
    }
}
</script>

<style lang="stylus">
    .content-box{
        height: 50rem;
    }
</style>